<template>
	<div style="width: 100%;margin-top: 30px;border: #D1C2D8 solid 1px;">
		<div style="width: 100%;height: 120px;background-color: rgb(245,245,245);">
			<el-steps :active="1" style="margin-left: 50px;margin-right: 50px;">
			  <el-step title="1.确认汇报内容" icon="el-icon-edit" style="margin-top: 30px;"></el-step>
			  <el-step title="2.确认订单" icon="el-icon-goods" style="margin-top: 30px;"></el-step>
			  <el-step title="4.完成" icon="el-icon-circle-check" style="margin-top: 30px;"></el-step>
			</el-steps>
		</div>
		<div style="width: 100%;">
			<div style="margin-left: 30px; margin-top: 30px;">
				<p style="display: inline;color: coral;font-size: 25px;font-weight: 1000;">|</p>
				<p style="color: coral;font-size: 20px;display: inline;"> &nbsp;&nbsp; 确认您所选择的汇报信息和购买数量</p>
				<div>
					<div style="width: 95%;height: 150px;border: 1px solid #D1C2D8;margin-left: 12px;margin-top: 20px;">
						<div style="width: 100%;height: 50px;background-color: rgb(221,221,221);">						
							<p style="display: inline;margin-left: 5%;position: relative;top: 15px;">项目名称</p>				
							<p style="display: inline;margin-left: 12%;position: relative;top: 15px;">发起人</p>		
							<p style="display: inline;margin-left: 16%;position: relative;top: 15px;">回报内容</p>
							<p style="display: inline;margin-left: 15%;position: relative;top: 15px;">回报数量</p>
							<p style="display: inline;margin-left: 7%;position: relative;top: 15px;">支持单价</p>
							<p style="display: inline;margin-left: 7%;position: relative;top: 15px;">邮费</p>
							
						</div>
						<div style="width: 15%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{project.projectName}}</p>
						</div>
						<div style="width: 20%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{sponsor.introduce}}</p>
						</div>
						<div style="width: 25%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;">{{retutable.retuText}}</p>
						</div>
						
						
										
						<div style="width: 15%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<el-input @blur="selectRetuId()" v-model="orderNumber1" placeholder="请输入内容" :disabled="false" style="text-align: center;margin-top: 30px;color: coral;width: 65%;margin-left: 30px;"></el-input>
							<!-- 当前订单支持最大的数额{{orderNumber2}}					 -->
						</div>
						<div style="width: 12%;height: 100px;border-right: #D1C2D8 1px solid;float: left;">
							<p style="text-align: center;margin-top: 30px;color: coral;">￥ &nbsp; {{retutable.payMoney}}</p>
						</div>
						<div style="height: 100px;">
							<p style="text-align: center;margin-top: 30px;">配送费用：<span v-if="retutable.isEmail==0">包邮</span>
											<span style="color: coral;" v-if="retutable.isEmail!=0">￥{{retutable.isEmail}}</span></p>
						</div>
					</div>
				</div>				
			</div>
			<div style="float: right;margin-right: 50px;">
			<p >总价(含运费)：￥{{zongjia}}</p>
			<el-button type="warning" plain class="el-icon-bank-card" @click="dingdan2()">去结算</el-button>
			</div>
		</div>
		<div style="width: 90%;height: 200px;margin-left: 30px;margin-top: 30px;margin-bottom: 30px;border-left: #D1C2D8 5px solid;clear: both;">
			<div style="margin-left: 30px;">
				<i class="el-icon-warning" style="font-size: 20px;color: skyblue;">提示</i>
				<p style="font-size: 10px;">1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。</p>
				<p style="font-size: 10px;">2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。</p>
				<p style="font-size: 10px;">3.本项目必须在2017-06-04之前达到 ￥1000000.00 的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。</p>
				<p style="font-size: 10px;">4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。</p>
				<p style="font-size: 10px;">5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。</p>
				<p style="font-size: 10px;">6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
	        retutable:{},
			project:{},
			sponsor:{},
			orderNumber:'',
			orderNumber1:'1',
			zongjia:''
	      }
	    },
		methods: {
			// 确认订单
			dingdan2() {
				var i = this.retutable.retuNumber-this.orderNumber-this.orderNumber1;
				
					if(i>=0||this.retutable.retuNumber==0){
						window.sessionStorage.setItem('orderNumber1',this.orderNumber1)
						window.sessionStorage.setItem('zongjia',this.zongjia)
						this.$router.push('/dingdan2')
					}else{
						this.$message.error('您输入的回报数量超过限制，请重新输入')
					}
								
			},
			//根据回报id查询
			async selectByProId(){
				//回报id
				var retuId = window.sessionStorage.getItem("retuId");
				var param = new URLSearchParams();
				param.append("retuId", retuId);
					//根据回报id查回报信息
				var res = await this.$http.post('/selectRetuTableByRIds', param);
				this.retutable = res.data.data
					//根据回报id查订单回报数量
				var res1 = await this.$http.post('/selectOrderNumberByRetuID',param)
					this.orderNumber = res1.data.data
					this.retutable.retuNumber
				//项目id
				var projectId = window.sessionStorage.getItem("projectId");
				var param1 = new URLSearchParams();
				param1.append("projectId", projectId);				
					//根据项目id查项目信息
				var ress = await this.$http.post('/selectProjectByProjectId', param1);
				this.project = ress.data.data[0]
					//根据项目id查发起人信息
				var ress1 = await this.$http.post('/selectByPid', param1);
				this.sponsor = ress1.data.data
				this.zongjia = this.retutable.payMoney * this.orderNumber1 + this.retutable.isEmail
				 
				 
			},
			// 动态判断回报数量
			selectRetuId(){
				var i = this.retutable.retuNumber-this.orderNumber-this.orderNumber1;
				
				if(i>=0||this.retutable.retuNumber==0){
					this.zongjia = this.retutable.payMoney * this.orderNumber1 + this.retutable.isEmail
				}else{
					this.$message.error('您输入的回报数量超过限制，请重新输入')
				}
			}
			
		},
		mounted() {
			this.selectByProId()
		}
	  }
</script>

<style>
</style>
